<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		
		<style>
			[type="text"],[type="password"],[type="date"] {
				width: 120px;
				height: 35px;
			}

			[type="submit"],[type="reset"] {
				width: 60px;
				height: 35px;
			}
		</style>
	</head>
	<body>
		<h1>属性选择器</h1>
		<ul>
			<li>属性选择器是CSS3的新特性</li>
			<li>用于根据属性的值来进行元素的选择</li>
			<li>该选择器在input标签中用得非常多</li>
			<li>选择具有att属性：[att]</li>
			<li>选择具有att属性且属性值为val：[att="val"]</li>
			<li>选择具有att属性且属性值为空格分割的字词列表，其中一个等于val：[att~="val"]</li>
			<li>选择具有att属性且属性值为以val开头的字符串：[att^="val"]</li>
			<li>选择具有att属性且属性值为以val结尾的字符串：[att$="val"]</li>
			<li>选择具有att属性且属性值为包含val的字符串：[att*="val"]</li>
			<li>选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串：E[att|="val"]</li>
		</ul>
		<h1>实验题目</h1>
		<ul>
			<li>把所有的input文本框大小设置一样</li>
			<li>按钮设值一样大小</li>
		</ul>
		<h2>表单</h2>
		<div>
			用户名：<input type="text"/><br/>
			密码：<input type="password"/><br/>
			出生年月：<input type="date"><br/>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
		</div>
	</body>
</html>
